<!doctype html>
<html lang="en">
	<head>
		<title>PDM Modelviewer</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);

			body {
				font-family: 'Lato';
				background-color: #f0f0f0;
				margin: 0px auto;
				max-width: 1150px;
				margin-top: 50px;
			}

			h2 {
				font-weight : 400;
			}
		</style>
	</head>
	<body>
		<script src="../models/model_pca_20_svm.js"></script>
		<script src="./js/libs/dat.gui.min.js"></script>
		<h2>Modelviewer</h2>
		<canvas id="compare" width="600" height="550"></canvas>
		<p>Load a model from a file:</p>
		<input type="file" value="load a model" id="loadjs"/>

		<script>
			function loadjs(file) {
				var reader = new FileReader();
				var str;
				reader.onload = function(theFile) {
				str = theFile.target.result;
				debugger;
				(function() { eval.apply(this, arguments); }(str));
				rebuild();
			}
			reader.onerror = function() {alert("error reading file")};
			reader.readAsText(file.target.files[0]);
		}
		document.getElementById('loadjs').addEventListener('change', loadjs, false);

		function rebuild() {
			// check how many parameters
			pnums = pModel.shapeModel.eigenValues.length;

			ph = new parameterHolder();
			gui.destroy();
			gui = new dat.GUI();

			control = {};
			eig = 0;
			for (var i = 0;i < pnums;i++) {
				eig = Math.sqrt(pModel.shapeModel.eigenValues[i])*3
				control['c'+(i+1)] = gui.add(ph, 'component '+(i+1), -eig, eig);
			}

			for (var i = 0;i < pnums;i++) {
				control['c'+(i+1)].onChange(drawNew);
			}

			params = [];
			for (var i = 0;i < pnums;i++) {
				params.push(ph['component '+(i+1)]);
			}

			drawNew();
		}

		var canvasInput = document.getElementById('compare');
		var cc = canvasInput.getContext('2d');
		cc.fillStyle = "rgb(200,0,0)";

		// check how many parameters
		var pnums = pModel.shapeModel.eigenValues.length;

		var parameterHolder = function() {
			for (var i = 0;i < pnums;i++) {
				this['component '+(i+1)] = 0;
			}
		};

		var ph = new parameterHolder();
		var gui = new dat.GUI();

		var control = {};
		var eig = 0;
		for (var i = 0;i < pnums;i++) {
			eig = Math.sqrt(pModel.shapeModel.eigenValues[i])*3
			control['c'+(i+1)] = gui.add(ph, 'component '+(i+1), -eig, eig);
		}

		var params;
		var drawNew = function(value) {
			cc.clearRect(0,0,600,600);
			params = [];
			for (var i = 0;i < pnums;i++) {
				params.push(ph['component '+(i+1)]);
			}
			draw(document.getElementById('compare'), similarityTransforms.concat(params));
		}

		for (var i = 0;i < pnums;i++) {
			control['c'+(i+1)].onChange(drawNew);
		}

		params = [];
		for (var i = 0;i < pnums;i++) {
			params.push(ph['component '+(i+1)]);
		}

		var similarityTransforms = [4,0,0,0];
		//var similarityTransforms = [1, 0, -250, -450];
		//var similarityTransforms = [1, 0, 200, 200];
		var paramslength = params.length;
		var num_points = pModel.shapeModel.numPtsPerSample;

		var x,y;

		var i, path;

		var drawPath = function(canvasContext, path, dp) {
			canvasContext.beginPath();
			var i, x, y;
			for (var p = 0;p < path.length;p++) {
				i = path[p]*2;
				x = pModel.shapeModel.meanShape[i/2][0];
				y = pModel.shapeModel.meanShape[i/2][1];
				for (var j = 0;j < pModel.shapeModel.numEvalues;j++) {
					x += pModel.shapeModel.eigenVectors[i][j]*dp[j+4];
					y += pModel.shapeModel.eigenVectors[i+1][j]*dp[j+4];
				}
				a = dp[0]*x - dp[1]*y + dp[2];
				b = dp[0]*y + dp[1]*x + dp[3];
				x += a;
				y += b;

				if (i == 0) {
					canvasContext.moveTo(x,y);
				} else {
					canvasContext.lineTo(x,y);
				}
			}
			canvasContext.moveTo(0,0);
			canvasContext.closePath();
			canvasContext.stroke();
		}

		function drawPoint(canvasContext, point, dp) {
			var i, x, y;
			i = point*2;
			x = pModel.shapeModel.meanShape[i/2][0];
			y = pModel.shapeModel.meanShape[i/2][1];
			for (var j = 0;j < pModel.shapeModel.numEvalues;j++) {
				x += pModel.shapeModel.eigenVectors[i][j]*dp[j+4];
				y += pModel.shapeModel.eigenVectors[i+1][j]*dp[j+4];
			}
			a = dp[0]*x - dp[1]*y + dp[2];
			b = dp[0]*y + dp[1]*x + dp[3];
			x += a;
			y += b;
			canvasContext.beginPath();
			canvasContext.arc(x, y, 2, 0, Math.PI*2, true);
			canvasContext.closePath();
			canvasContext.fill();
		}

		var draw = function(canvas, pv) {
			// if no previous points, just draw in the middle of canvas

			var params;
			if (pv === undefined) {
				params = currentParameters.slice(0);
			} else {
				params = pv.slice(0);
			}

			var cc = canvas.getContext('2d');
			cc.fillStyle = "rgb(0,0,0)";
			cc.strokeStyle = "rgb(0,0,0)";
			//cc.lineWidth = 1;
			cc.save();

			var paths = pModel.path.normal;
			for (var i = 0;i < paths.length;i++) {
				if (typeof(paths[i]) == 'number') {
					drawPoint(cc, paths[i], params);
				} else {
					drawPath(cc, paths[i], params);
				}
			}

			cc.restore()
		}
		draw(document.getElementById('compare'), similarityTransforms.concat(params))
		/*
		var eigenVectors = new goog.math.Matrix(num_points*2, 7);
  		for (var i = 0;i < num_points*2;i++) {
			for (var j = 0;j < 7;j++) {
				eigenVectors.setValueAt(i, j, pModel.shapeModel.eVectors[(i*num_points*2)+j]);
			}
  		}*/

		</script>
	</body>
</html>
